---
sidebar_position: 5
title: Setting Url Parameters Type
sidebar_label: Url Parameters
---

# URL Parameters

Many API endpoints use dynamic URL segments to identify resources, like `/users/:userId`. Hyper-fetch automatically
infers these **URL parameters** from the endpoint string, providing full type safety. This means you'll get compile-time
errors if you forget to provide a required parameter or use the wrong type, making your requests much safer.

:::secondary What you'll learn

1.  How Hyper-fetch **infers URL parameters** from the endpoint string.
2.  The two ways to provide parameters: via `.setParams()` or in the `.send()` method.
3.  How to work with **multiple URL parameters** in a single request.

:::

### Why is it helpful?

- **Route Correctness**: Guarantees that dynamic URL segments are always provided, preventing 404 errors from malformed
  URLs.
- **Type Safety**: Ensures that parameters are provided, catching potential issues at compile-time.
- **Compile-Time Checks**: Catches missing or misspelled parameters during development, not in production.
- **Improved Readability**: The request definition clearly shows which parameters are required for the endpoint to
  function.

---

### Example

Hyper-fetch parses the `endpoint` string to automatically infer the required URL parameters, making them type-safe.

```ts
// import { createClient } from '@hyper-fetch/core';

export const client = createClient()({
  url: "https://api.example.com",
});

// 1. Define the response type
type User = { id: number; name: string };
type ResponseType = User;

// 2. Create a request with a dynamic URL parameter
// Hyper-fetch infers that `userId` is a required parameter.
// highlight-start
const getUser = client.createRequest<{ response: ResponseType }>()({
  endpoint: "/users/:userId",
});
// highlight-end

// 3. Provide the parameter using the `.send()` method
// The `params` object is strongly typed. Try renaming `userId` to see an error.
const { data: user1 } = await getUser.send({
  params: { userId: 1 },
});

// 4. Alternatively, provide the parameter using `.setParams()` for reusability
const getUser1 = getUser.setParams({ userId: 1 });
const { data: user1Again } = await getUser1.send();

// 5. Example with multiple parameters
const getComment = client.createRequest()({
  endpoint: "/posts/:postId/comments/:commentId",
});

const { data: comment } = await getComment.send({
  params: {
    postId: 10,
    commentId: 2,
  },
});
```

---

:::success Congratulations!

You're now an expert in URL parameters!

- You can let Hyper-fetch **automatically infer path parameters** from your endpoint.
- You know how to provide parameters either by **chaining `.setParams()`** or **passing them to `.send()`**.
- You can confidently work with endpoints that require **multiple URL parameters**.

:::
